.phoneframe {
  overflow: hidden;
  height: 0;
  position: relative;
  padding-top: calc(350 / 171 * 100%);

  & iframe {
    border: 0;
    height: 91.6%;
    left: 6.5%;
    top: 2.8%;
    width: 86.6%;
    position: absolute;
    background: transparent;
    border-radius: 10.8% / 4.6%;
  }

  &:before {
    content: '';
    background-image: svg-load('StickyNugget.frame.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    pointer-events: none;
  }
}

/* Have to apply max-width and max-height on a container to prevent fuckups to aspect-ratio behavior */
.example {
  max-width: 574px;
  min-height: 380px;
  aspect-ratio: 171 / 350;
}
@supports (aspect-ratio: 16 / 9) {
  .example {
    max-height: max(calc(100vh - 2.5rem), 560px);
  }
}

.loader {
  border-radius: 10.8% / 4.6%;
  height: 91.6%;
  left: 6.5%;
  top: 2.8%;
  box-shadow: 0 0 0 2px black;
  width: 86.6%;
}

.fancybg {
  left: 50%;
  transform: translateX(-50%) skewY(-9deg);
  width: 100vw;
}
